<template>
    <div class="tabs-content">
        <div class="tabs-content-item" v-for="(tab, index) in  tabsList" @click="switchTabHandle(tab, index)"
            :style="tabIndex == index ? tabStyle : ''" :key="index" @mouseenter="mouseShow = true"
            @mouseleave="mouseShow = false">
            <!-- <div style="position: absolute;top:-5px;right:-25px" v-if="typeTabs == 'sys' && tabIndex == index && mouseShow">
                <i v-if="isAuth($button.tenantlearningCataloguedel)" style="color:#f56c6c" class="el-icon-delCircle"
                    @click.stop="$emit('del', tab)"></i>
                <i v-if="isAuth($button.tenantlearningCatalogueedit)" style="color:#6e92e9" class="el-icon-editCircle"
                    @click.stop="$emit('edit', tab)"></i>
            </div> -->
            <!-- :style="tabIndex == 0 ? { 'font-size': '15px' } : ''" -->
            <span> {{ tab.name }}</span>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
const tabIndex = ref(0)
const mouseShow = ref(false)
const tabStyle = reactive({
    'border-bottom': '2px solid #409EFF',
    'color': '#409EFF'
})
const props = defineProps({
    tabsList: { default: function () { return [] } },
    typeTabs: { default: function () { '' } },
    remTabIndex: { default: 0 },
})
const $emit = defineEmits(['switchTab'])
const switchTabHandle = (tab, index) => {
    tabIndex.value = index
    $emit('switchTab', tab)
}
function switchTabChange(index) {
    tabIndex.value = index || 0
}
defineExpose({ switchTabChange });
// watch(props.tabsList, () => { tabIndex.value = 0 })
onMounted(() => {
    // props.remTabIndex === tabIndex.value ? '' : tabIndex.value = props.remTabIndex
})

</script>

<style lang="scss" scoped>
.tabs-content {
    display: flex;

    .tabs-content-item {
        span {
            font-size: 14px;
        }

        cursor: pointer;
        display: block;
        position: relative;
        margin: 0px 15px;
        white-space:nowrap;
        // padding: 10px 0;
        // height: 40px;
    }

    overflow:auto;
    scrollbar-width: thin;
    scrollbar-color: transparent #eeeeee;

    /*滚动条里面小方块*/
    &:hover::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #eeeeee;
    }

    &:hover::-moz-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #eeeeee;
    }

    &::-webkit-scrollbar-thumb {
        background: transparent;

    }

    &::-moz-scrollbar-thumb {
        background: transparent;

    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-moz-scrollbar-color {
        background: transparent;
    }
}
</style>
